import { Button } from "antd";
import './index.scss'
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { setShowBtnTool } from "@/store/modules/style";

export default function BtnTool({ isShow = true, total = '', isSave = true, isDel = true, onDel, onSave, isFixed = true }) {
    const { mwidth } = useSelector(state => state.toggelStyle)
    const dispatch = useDispatch()
    useEffect(() => {
        isSave && dispatch(setShowBtnTool(isSave))
        return () => {
            dispatch(setShowBtnTool(false))
        }
    }, [dispatch, isSave])
    if (!isShow) return null;
    return (
        <div
            className={`btntool-container ${isFixed ? 'fixed' : 'static'}`} // ✅ 使用两个 class
            style={{
                ...(isFixed ? { left: mwidth } : {}),
                justifyContent: isSave ? 'center' : 'space-between',
            }}
        >
            <p>{total}</p>
            <div>
                {isSave && <Button type="primary" onClick={onSave}>保存</Button>}
                {isDel && <Button type="primary" onClick={onDel} danger>删除</Button>}
            </div>
        </div>
    );
}
